<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>我的银行</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>
	<body>
		<div class="page_box bg_color" id="app" style="min-height: 100vh;">
			<div class="bank_cont">
				<div class="bank_box ">
					<ul class="bank_list address_forms">
<!--						<li>-->
<!--							<span>开户行名称</span>-->
<!--							<input type="text" placeholder="请输入开户行名称" v-model="bank_title" />-->
<!--						</li>-->
						<li>
							<span>选择地区</span>
							<div class="input">
								<a href="javascript:;" id="city" >{{area_info}}</a>
								<img src="__API__/lib/images/more.png" alt="">
								<input type="hidden" name="area_info" v-model="area_info" placeholder="请选择地区" readonly />
							</div>
						</li>
						<li>
							<span>开户人姓名</span>
							<input type="text" placeholder="请输入开户人姓名" v-model="bank_name" />
						</li>
						<li>
							<span>银行账号</span>
							<input type="text" placeholder="请输入银行账号" v-model="bank_card" />
						</li>
						<li>
							<span>开户行地址</span>
							<input type="text" placeholder="请输入开户行地址" v-model="bank_address" />
						</li>
					</ul>
				</div>
				<div class="blue_btn bank_btn" @click="onSubmit()">保存</div>
			</div>
		</div>

		<script>
			$(function() {
				var mobileSelect = new MobileSelect({
					trigger: '#city',
					wheels: [{
						data: {$data|raw}
					}],
					ensureBtnText: '确定',
					position: [1],
					callback: function(indexArr, data) {
						$('#city').css('color', '#333');

						app.$data.area_info = data[0]
					}
				});
			})
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					bank_title: '请选择开户行',
					bank_name: '',
					bank_card: '',
					bank_address: '',
					area_info:'请选择开户行'
				},
				created: function() {
					var that = this;
					common.ajax("{:url('Member/my')}",{token:localStorage.getItem('token')} , function(res) {
						//common.showToast(res.msg);
						that.area_info = res.data.bank_title;
						that.bank_name = res.data.bank_name;
						that.bank_card = res.data.bank_card;
						that.bank_address = res.data.bank_address;

						// that.getData(searchValue);
					})
					// common.ajax("{:url('Bank/all')}",{} , function(res) {
					// 	mobileSelect.updateWheel('data', res.data)
					// 	// that.getData(searchValue);
					// })
				},
				methods: {
					goDetail(url) {
						common.openUrl(url)
					},
					onSubmit() {
						let that = this;
						let data = {
							token:localStorage.getItem('token'),
							bank_title: that.area_info,
							bank_name: that.bank_name,
							bank_card: that.bank_card,
							bank_address: that.bank_address,
						}
						common.ajax("{:url('Member/bind_bank')}",data , function(res) {
							common.showToast(res.msg);
							if(res.code == 200){
								setTimeout(function() {
									common.PageBack();
									// common.openUrl("{:url('index')}");
								}, 2000)
							}
							// that.getData(searchValue);
						})
					}
				}
			});
		</script>
	</body>

</html>
<style>
	.address_form li{ margin: 0}
	.address_forms li a {
		flex: 1;
		text-align: left;
		display: block;
		min-height: 0.32rem;
		font-size: .28rem;
	}
	.address_forms li .input {
		flex: 1;
		background-color: #f5f5f5;
		border-radius: 0.15rem;
		padding: 0 0.4rem;
		min-height: 0.86rem;
		text-align: left;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999;
	}
	.address_forms li a {
		display: flex;
		align-items: center;
		color: #999;
	}
	.address_forms li .input img {
		flex-shrink: 0;
		width: 0.12rem;
		height: 0.21rem;
	}
</style>
